<template>
  <div>
    <dept-tree
      v-if="type === 'tree'"
      :id="id"
      v-model="value"
      :placeholder="placeholder"
      :name="name"
      :value="value"
      :autocomplete="autocomplete"
      :automatic-dropdown="automaticDropdown"
      :size="size"
      :disabled="disabled"
      :clearable="clearable"
      :filterable="filterable"
      :allow-create="allowCreate"
      :loading="loading"
      :popper-class="popperClass"
      :remote="remote"
      :loading-text="loadingText"
      :no-match-text="noMatchText"
      :no-data-text="noDataText"
      :remote-method="remoteMethod"
      :multiple="multiple"
      :multiple-limit="multipleLimit"
      :default-first-option="defaultFirstOption"
      :reserve-keyword="reserveKeyword"
      :value-key="valueKey"
      :collapse-tags="collapseTags"
      :popper-append-to-body="popperAppendToBody"
      @input="$emit('input',value)"
      @change="$emit('change',value)"
    />
    <dept-table
      v-if="type === 'table'"
      v-model="value"
      :value="value"
      :disabled="disabled"
      :placeholder="placeholder"
      :clearable="clearable"
      :multiple="multiple"
      :multiple-limit="multipleLimit"
      @input="$emit('input',value)"
      @change="$emit('change',value)"
    />
  </div>
</template>

<script>
import DeptTree from './dept'
import DeptTable from './DeptTable/index'
import props from '@/components/TreeSelect/mixin'
import tableProps from './DeptTable/mixin'
// import { getConfigKey } from '@/api/system/config'
export default {
  name: 'DeptSelect',
  components: {
    DeptTree,
    DeptTable
  },
  props: {
    ...props,
    ...tableProps
  },
  data() {
    return {
      type: '',
      userId: undefined
    }
  },
  watch: {
    // value: {
    //   handler(val) {
    //     console.log(val, '部门')
    //   },
    //   deep: true,
    //   immediate: true
    // }
  },
  created() {
    // getConfigKey('user_components_type').then(res => {
    //   if (!res.msg) {
    //     this.type = 'tree'
    //   } else {
    //     this.type = res.msg
    //   }
    // })
    if (!this.$store.state.app.componentLayout) {
      this.type = 'tree'
    } else {
      this.type = this.$store.state.app.componentLayout
    }
  },
  methods: {

  }
}
</script>

